<template>
	<view class="container">
		<view class="left" @tap="tapLeft">
			<slot name="left" v-if="showLeft"><u-icon name="arrow-left" color="#2979ff" size="20"></u-icon></slot>
		</view>
		<view class="input">
			<u-search
				v-model="keyword"
				:placeholder="placeholder"
				:bgColor="bgColor"
				:focus="focus"
				:clearabled="clearabled"
				:showAction="false"
				:disabled="disabled"
				@search="search"
				@change="change"
				@click="clickInput"
			></u-search>
		</view>
		<view class="right" @tap="tapRight"><slot name="right"></slot></view>
	</view>
</template>

<script>
export default {
	name: 'my-search',
	props: {
		placeholder: {
			type: String,
			default: '请输入关键字'
		},
		bgColor: {
			type: String,
			default: '#f2f2f2'
		},
		focus: {
			type: Boolean,
			default: false
		},
		clearabled: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		showLeft: {
			type: Boolean,
			default: false
		},
		search: {
			type: Function
		},
		change: {
			type: Function,
			// required: true
			// 不像对象或数组的默认，这不是一个
			// 工厂函数。这会是一个用来作为默认值的函数
			default() {
				return 'Default function';
			}
		},
		tapLeft: {
			type: Function
		},
		tapRight: {
			type: Function
		},
		clickInput: {
			//当disabled为false的时候该方法才生效
			type: Function
		}
	},
	data() {
		return {
			keyword: ''
		};
	}
};
</script>

<style lang="scss">
.container {
	display: flex;
	align-items: center;
	padding: 5px 0px;
	.left,
	.right {
		display: flex;
		justify-content: center;
	}
	.right {
		color: $u-content-color;
		font-size: 15px;
	}
	.input {
		margin: 0px 10px;
		flex: 1;
	}
}
</style>
